<template>
  <div class="app-container">
    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">
      <el-col :span="6">
        <el-form-item label="委外收车编号:">
          <el-input v-model="queryParams.code" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户名称:">
          <el-input v-model="queryParams.customerName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="客户类型:">
          <el-select v-model="queryParams.customerType" clearable>
            <template v-for="dict in dict.type.customer_type">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="车辆归属:">
          <el-input v-model="queryParams.vehicleOwnerName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="收车进度:">
          <el-select v-model="queryParams.recoveryProgress" clearable>
            <template v-for="dict in dict.type.receiving_progress">
              <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="供应商:">
          <el-input v-model="queryParams.supplierName" clearable placeholder="请输入" maxlength="30"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间:">
          <el-date-picker v-model="foreWarningTime" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchContent>
    <div class="card-wrap card-padding">
      <div class="table-title-wrap" style="justify-content: space-between">
        <p style="font-size: 14px; color: #c0c0c0" @click="btn(2)" v-hasPermi="['pickUpTheCar:list:expire']">供应商授权即将到期 ({{ dataTime }})</p>
        <div>
          <el-button type="primary" size="mini" @click="btn(1)" v-hasPermi="['pickUpTheCar:list:applyFor']">申请委外收车</el-button>
          <el-button type="primary" size="mini" @click="handleExport" v-hasPermi="['pickUpTheCar:list:export']">导出</el-button>
        </div>
      </div>
      <table-page :loading="loading" :dataList="dataList" border :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column fixed label="操作" width="340" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="text" v-hasPermi="['pickUpTheCar:list:view']" @click="btn(3, scope.row)">查看</el-button>

              <!-- <el-button type="text" v-hasPermi="['pickUpTheCar:list:withdrawalApplication']" @click="btn(4,scope.row)">撤销申请</el-button>
              <el-button type="text" v-hasPermi="['pickUpTheCar:list:submitResults']" @click="btn(5,scope.row)">提交结果</el-button>
              <el-button type="text" v-hasPermi="['pickUpTheCar:list:undoReplacement']" @click="btn(6,scope.row)">撤销更换</el-button>
              <el-button type="text" v-hasPermi="['pickUpTheCar:list:switch']" @click="btn(9,scope.row)">更换</el-button>
              <el-button type="text" v-hasPermi="['pickUpTheCar:list:stoppage']" @click="btn(8,scope.row)">终止收车</el-button> -->

              <el-button type="text" v-if="scope.row.recoveryProgress == 8" v-hasPermi="['pickUpTheCar:list:reInitiate']" @click="btn(10, scope.row)">重新发起委外收车</el-button>
              <el-button type="text" v-if="scope.row.recoveryProgress == 1" v-hasPermi="['pickUpTheCar:list:withdrawalApplication']" @click="btn(4, scope.row)">撤销申请</el-button>
              <el-button type="text" v-if="scope.row.recoveryProgress == 3 || scope.row.recoveryProgress == 4" v-hasPermi="['pickUpTheCar:list:submitResults']" @click="btn(5, scope.row)">提交结果</el-button>
              <el-button type="text" v-if="scope.row.recoveryProgress == 4" v-hasPermi="['pickUpTheCar:list:undoReplacement']" @click="btn(6, scope.row)">撤销更换</el-button>
              <el-button type="text" v-if="scope.row.recoveryProgress == 3" v-hasPermi="['pickUpTheCar:list:switch']" @click="btn(9, scope.row)">更换</el-button>
              <el-button type="text" v-if="scope.row.recoveryProgress == 3" v-hasPermi="['pickUpTheCar:list:stoppage']" @click="btn(8, scope.row)">终止收车</el-button>
            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="委外收车编号" align="center" prop="code" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="blue">{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customerName" min-width="180px" show-overflow-tooltip />
          <el-table-column label="客户类型" align="center" prop="customerType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
            </template>
          </el-table-column>
          <el-table-column label="车辆归属" align="center" prop="vehicleOwnerName" min-width="120px" show-overflow-tooltip />
          <el-table-column label="车辆数" align="center" prop="vehicleCount" />
          <el-table-column label="最新供应商" align="center" prop="latestSupplierName" min-width="120px" show-overflow-tooltip />
          <el-table-column label="授权时间" align="center" prop="authorizationTime" min-width="200px" show-overflow-tooltip />
          <el-table-column label="已收回车辆数" align="center" prop="reclaimedVehicleCount" min-width="120px" show-overflow-tooltip />
          <el-table-column label="自行收回车辆数" align="center" prop="selfReclaimedVehicleCount" min-width="120px" show-overflow-tooltip />
          <el-table-column label="供应商收回车辆数" align="center" prop="supplierReclaimedVehicleCount" min-width="150px" show-overflow-tooltip />
          <el-table-column label="收车进度" align="center" prop="recoveryProgress" min-width="120px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.receiving_progress" :value="scope.row.recoveryProgress" />
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy" min-width="120px" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="150px" show-overflow-tooltip />
        </template>
      </table-page>
    </div>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body class="form-dialog" :width="width">
      <div style="width: 90%; margin: 0 auto">
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="100px" :rules="rules">
          <el-form-item v-if="type == 4 || type == 6 || type == 8" label="说明:" prop="notes">
            <el-input type="textarea" :placeholder="placeholder" v-model="formDig.notes" maxlength="500" :rows="5" show-word-limit> </el-input>
          </el-form-item>
          <el-form-item v-if="type == 4 || type == 6 || type == 8" label="附件:" prop="attachments">
            <ImageCommon :up-type="2" info="选择附件" :limit="5" v-model="formDig.attachments" ></ImageCommon>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from '@/components/SearchContent/index.vue'
import { getPickList, authorizationExpires, backCarCancel } from '@/api/pickUpTheCar'
export default {
  components: {
    SearchContent,
  },
  name: 'PickUpTheCarList',
  dicts: ['receiving_progress', 'customer_type'],
  data() {
    return {
      width: '65%',
      title: '',
      placeholder: '',
      rules: {
        notes: [{ required: true, message: '请输入说明', trigger: 'blur' }],
      },
      foreWarningTime: [],
      // 遮罩层
      loading: true,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      dataList: [],
      // 表单参数
      formDig: {},
      type: null,
      dataTime: null,
    }
  },
  created() {
    this.getList()
    this.authorizationExpires()
  },
  methods: {
    cancelDig() {
      this.open = false
    },
    // 导出
    handleExport() {
      this.download(
        '/backCar/backCar/export',
        {
          ...this.queryParams,
        },
        `委外收车列表_${new Date().getTime()}.xlsx`
      )
    },
    /** 预警配置 */
    btn(type, row) {
      this.formDig.param = null
      this.type = type
      this.open = true
      this.$set(this, 'formDig', {})
      this.$nextTick(() => {
        this.$refs['formDig']?.clearValidate()
      })
      if (type == 1) {
        this.open = false
        // 跳转页面申请委外收车
        this.open = false
        this._toPage({
          name: 'PickUpTheCarApply',
          query: {
            type: 'add',
          },
        })
      } else if (type == 2) {
        // 不做任何处理只展示
        this.open = false
      } else if (type == 4) {
        console.log(row)
        this.width = '35%'
        this.title = '撤销'
        this.placeholder = '请输入撤销说明'
        this.$set(this.formDig, 'backCarId', row.id)
      } else if (type == 6) {
        this.width = '35%'
        this.title = '撤销更改'
        this.placeholder = '请输入撤销更改说明'
        this.$set(this.formDig, 'backCarId', row.id)
      } else if (type == 9) {
        // 更换供应商
        this.open = false
        this._toPage({
          name: 'ChangeSupplier',
          query: {
            type: 'edit',
            backCarId: row.id,
            customerName: row.customerName,
            code: row.code,
          },
        })
      } else if (type == 8) {
        this.width = '35%'
        this.title = '终止收车'
        this.placeholder = '请输入终止收车说明'
        this.$set(this.formDig, 'backCarId', row.id)
      } else if (type == 3) {
        // 查看详情 跳转
        this.open = false
        this._toPage({
          name: 'PickUpTheCarDetail',
          query: {
            type: 'detail',
            id: row.id,
          },
        })
      } else if (type == 5) {
        this.open = false
        this._toPage({
          name: 'SubmitResults',
          query: {
            type: 'edit',
            backCarId: row.id,
            supplierName: row.latestSupplierName,
            supplierId: row.latestSupplier,
          },
        })
      } else if (type == 10) {
        this.open = false
        // 跳转页面申请委外收车
        this.open = false
        this._toPage({
          name: 'PickUpTheCarApplyAnew',
          query: {
            id: row.id,
          },
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['formDig'].validate((valid) => {
        if (valid) {
          if (this.type == 4) {
            // 接口
            this.formDig.type = 1
            backCarCancel(this.formDig).then((res) => {
              this.open = false
              this.$message.success('修改成功')
              this.getList()
            })
          } else if (this.type == 6) {
            // 接口
            this.formDig.type = 2
            backCarCancel(this.formDig).then((res) => {
              this.$message.success('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            // 接口
            this.formDig.type = 3
            backCarCancel(this.formDig).then((res) => {
              this.$message.success('修改成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    async authorizationExpires() {
      try {
        let res = await authorizationExpires(this.queryParams)
        this.dataTime = res.data
      } catch (error) {}
    },
    /** 查询测试单表列表 */
    getList() {
      this.loading = true
      getPickList(this.queryParams).then((res) => {
        if (res.code == '200') {
          const { rows, total } = res
          this.dataList = rows
          this.total = total
          this.loading = false
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.startTime = this.foreWarningTime[0]
      this.queryParams.endTime = this.foreWarningTime[1]
      this.getList()
      this.authorizationExpires()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.foreWarningTime = []
      this.handleQuery()
    },
  },
}
</script>
<style lang="scss" scoped>
.pagination-container {
  padding: 0 20px 50px !important;
}
.blue {
  color: #1890ff !important;
  cursor: pointer;
}
</style>
